html,
body {
    padding: 0;
    margin: 0;
    font-family: "PingFang SC";
}

.welcomePage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    text-align: center;
    background: url("../../static/images/star/06_star_4.png");
}

.button-wrapper1 {
    position: relative;
    width: 240px;
    height: 60px;
    text-align: center;
}

.rectangle1 {
    stroke-width: 8px;
    stroke: #ff6348;
    fill: transparent;
    stroke-dasharray: 100 500;
    stroke-dashoffset: -372;
}

.button-wrapper2 {
    position: relative;
    width: 240px;
    height: 60px;
    text-align: center;
}

.rectangle2 {
    stroke-width: 8px;
    stroke: #ff6348;
    fill: transparent;
    /* Core part of the animation */
    stroke-dasharray: 100 500;
    stroke-dashoffset: -372;
}

.btn {
    color: white;
    font-size: 18px;
    letter-spacing: 6px;
    position: relative;
    top: -48px;
}
button{
    background: aqua;
}

a{
    text-decoration: none;
}

@keyframes extend1 {
    to {
        stroke-dasharray: 600;
        stroke-dashoffset: 0;
        stroke-width: 2;
    }
}

@keyframes extend2 {
    to {
        stroke-dasharray: 600;
        stroke-dashoffset: 0;
        stroke-width: 2;
    }
}

.button-wrapper1:hover .rectangle1 {
    animation: 0.5s extend1 linear forwards;
}

.button-wrapper2:hover .rectangle2 {
    animation: 0.5s extend2 linear forwards;
}